<template>
  <div class="stayComplete">
    <!-- 最高库存预警报表 -->
    <div class="inst">
    <el-row >
      <el-col :span="23" style="padding : 0px 0 10px 10px">
        <div class="header">
          <div class="date">
          <div class="icon"></div>
          <input readonly @click="dateChoose" v-model="date" class="date-main">
          </div>
          <span class="set">低库存预警通知</span>
          <el-switch class="slid" v-model="key" active-color="#1759A8" inactive-color="#DCDFE6" @change="change"></el-switch>
        </div>
        <div class="code">
          <input type="text" v-model="code1" placeholder="起始物料代码">至
          <input type="text" v-model="code2" placeholder="截止物料代码">
        </div>
        <div style="margin-top:10px">
          <label for="" class="text">可销售天数：</label>
          <el-input-number class="select" v-model="days" @change="handleChange" :min="-2000" :max="2000" label="最高库存可销售天数"></el-input-number>
          <input type="button" class="search" @click="cc" value="查询">
        </div>
      </el-col>
    </el-row>
      <el-row>
        <el-col >
          <el-table :data="tableData" stripe height="400">
            <el-table-column fixed prop="code" label="产品代码" width="100">
            </el-table-column>
            <el-table-column prop="name" label="产品名称" show-overflow-tooltip width="150" align="center">
            </el-table-column>
            <el-table-column prop="norms" label="规格型号" show-overflow-tooltip width="150"  align="center">
            </el-table-column>
            <el-table-column prop="unit" label="单位" align="center">
            </el-table-column>
            <el-table-column prop="extant" label="现存量" align="center">
            </el-table-column>
            <el-table-column prop="threeOut2" label="近三个月日均出库量" align="center">
            </el-table-column>
            <el-table-column prop="day" label="可销售天数" align="center">
            </el-table-column>
            <el-table-column prop="inKu" label="预计生产入库总量" align="center">
            </el-table-column>
            <el-table-column prop="inKuDetail" label="预计生产入库明细" show-overflow-tooltip width="150" align="center">
            </el-table-column>
            <el-table-column prop="tips" label="备注" align="center">
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
  </div>
  </div>
</template>
<script> 
import * as moment from 'moment';
export default {
  name: "component_name",
  data() {
    return {
        tableData:[],
        days: '',
        date:'',
        code1:'',
        code2:'',
        kind:'MiniAlert',
        key:''
    };
  },
  methods: {
    handleCurrentChange(val) {
       this.currentPage = val ? this.currentPage + val : 0;
       this.initList() ;
    },
    handleChange(value) {
        this.days=value;
    },
   cc  () {
     if(!this.date){
       this.$ddapi.toast('请选择查询日期');
       return;
     }
     if(!this.code1){
       this.$ddapi.toast('请选择起始物料代码');
       return;
     }
     if(!this.code2){
       this.$ddapi.toast('请选择截止物料代码');
       return;
     }
     this.currentPage=0;
     this.initList('cc') ;
   },
   initList:function(cc){
     this.$http.post('api/product/queryProductMinWarming',{
       code4:this.date,
       days: this.days,code1:this.code1,code2:this.code2
       }).then(res=>{
       let result = res.data;
       if(result.code==100){
         this.tableData = result.data;
          if(cc == 'cc'){
           this.$ddapi.toast('查询成功');
         }
       }
       if(result.code == 101){
          this.tableData = [] ;
          this.$ddapi.toast('暂无数据');
       }
     })
   },
   dateChoose(){
     this.$ddapi.datepicker().then(res=>{
       this.date=res;
     })
   },
   change(){
    this.$http.post('/api/product/stopSend',{kind:this.kind,key:this.key}).then(res=>{
      let result=JSON.stringify(res.data.code)
      if(result==100){
        this.$ddapi.toast('修改成功')
      }else if(result==101){
        this.$ddapi.toast('修改失败')
      }
    })
   },
   gets(){
     this.$http.get('/api/product/findUserTel').then(res=>{
      let result=JSON.stringify(res.data.data.MiniAlert);
      this.key=result;
    })
   }
  },
  created: function() {
       this.date = moment().format('YYYY-MM-DD');
      //  this.initList('');
  }
};
</script>
<style lang="css" scoped>
.stayComplete {
  margin-top: 0.8rem;
}
.workBox {
  width: 100%;
  border-bottom: 1px solid #f8f8f8;
  position: absolute;
  z-index: 9999;
  margin-bottom: 1rem;
}

.over {
  width: 100%;
  height: 3.5rem;
  line-height: 3.7rem;
  font-size: 1.3rem;
  color: #fff;
  text-align: center;

  letter-spacing: 0.92px;
  background: #175aa9;
  color: #fff;
}

.over {
  position: absolute;
  right: 0;
  top: 0rem;
}
.text{
    display: inline-block;
    width: 30%;
    font-size: 1.3rem;
    color: #9d9d9d;
    text-align: center;
}
.select{
    width:120px;
}
.header{
  width: 100%;
  height: 40px;
  position: relative;
}
.date{
  width: 50%;
  height: 40px;
  float: left;
  border: 1px solid #d8dce5;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  font-size: 1.2rem;   
}
.date>.icon{
  width: 1.4rem;
  height: 1.5rem;
  position: absolute;
  background:url('../../static/images/icon-date.png')no-repeat center/contain;
  left: 12rem;
  top:0;
  bottom: 0;
  margin:auto;
}
.date-main{
  width: 50%;
  height: 100%;
  padding-left: 8%;
}
.code{
  width: 100%;
  height: 40px;
  color: #9d9d9d;
  border: 1px solid #d8dce5;
  box-sizing: border-box;
  background: #fff;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 40px;
  font-size: 1.2rem;  
}
.code>input{
  width: 42%;
  padding-left: 10%;
}
.search{
  float: right;
  width: 30%;
  height: 30px;
  margin-top: 5px;
  line-height: 30px;
  border: 1px solid #1759A8;
  color: #1759A8;
  box-sizing: border-box;
  font-size: 1.2rem;
}
.slid{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  margin: auto;
}
.set{
  display: inline-block;
  font-size: 1.3rem;
  line-height: 40px;
  padding-left: 20px;
}
</style>